<html>
<head><title>Index</title>

<script type="text/javascript" src="../js/drawing.js"></script>

</head>
<body>

<p>Lines</p>

<div id="drawing0" 
  style="width:300px; height: 300px; border: 1px solid black; margin: 20px auto; padding: 0px; overflow: hidden;"></div>


<script type="text/javascript">
  
var d0 = new drawing(document.getElementById("drawing0"), { antialias: true, fillcolor: "#fff" });

var l0 = d0.line(d0.drawing, 
    { x1: "50px", y1: "50px", x2: "250px", y2: "100px", 
      strokewidth: "14px", strokecolor: "#AA0000" });  

var l1 = d0.line(d0.drawing, 
    { x1: "50px", y1: "250px", x2: "250px", y2: "150px", 
      strokewidth: "10px", strokecolor: "#000088", linecap: "round" });  

</script>



<p>Polylines</p>

<div id="drawing1" 
  style="width:300px; height: 300px; border: 1px solid black; margin: 20px auto; padding: 0px; overflow: hidden;"></div>


<script type="text/javascript">
  
var d1 = new drawing(document.getElementById("drawing1"), { antialias: true, fillcolor: "#fff" });

var p0 = d1.polyline(d1.drawing, 
    { points: "50,100,100,50,150,100,200,50,250,100", 
      strokewidth: "14px", strokecolor: "#AA0000" });  

var p1 = d1.polyline(d1.drawing, 
    {  points: "50,150,250,150,250,250,50,250,50,200,200,200",
      strokewidth: "10px", strokecolor: "#000088", linecap: "round" });  

</script>

<p>Circles</p>

<div id="drawing2" 
  style="width:300px; height: 300px; border: 1px solid black; margin: 20px auto; padding: 0px; overflow: hidden;"></div>


<script type="text/javascript">
  
var d2 = new drawing(document.getElementById("drawing2"), { antialias: true, fillcolor: "#fff" });

var c0 = d2.circle(d2.drawing, 
    { x: "100px", y: "100px", r: "75px", 
      strokewidth: "14px", strokecolor: "#AA0000", fillcolor: "#330000" });  

var c1 = d2.circle(d2.drawing, 
    {  x: "200px", y: "200px", r: "150px",
      strokewidth: "10px", strokecolor: "#000088" });  

</script>


<p>Ovals</p>

<div id="drawing3" 
  style="width:300px; height: 300px; border: 1px solid black; margin: 20px auto; padding: 0px; overflow: hidden;"></div>


<script type="text/javascript">
  
var d3 = new drawing(document.getElementById("drawing3"), { antialias: true, fillcolor: "#fff" });

var o0 = d3.oval(d3.drawing, 
    { x: "100px", y: "100px", rx: "50px", ry: "75px",  
      strokewidth: "14px", strokecolor: "#AA0000", fillcolor: "#330000" });  

var o1 = d3.oval(d3.drawing, 
    {  x: "200px", y: "200px",  rx: "150px", ry: "100px",  
      strokewidth: "10px", strokecolor: "#000088" });  

</script>

<p>Rectangles</p>

<div id="drawing4" 
  style="width:300px; height: 300px; border: 1px solid black; margin: 20px auto; padding: 0px; overflow: hidden;"></div>


<script type="text/javascript">
  
var d4 = new drawing(document.getElementById("drawing4"), { antialias: true, fillcolor: "#fff" });

var r0 = d4.rectangle(d4.drawing, 
    { x: "50px", y: "50px", w: "150px", h: "150px", r: "30px",
      strokewidth: "14px", strokecolor: "#AA0000", fillcolor: "#330000" });  

var r1 = d4.rectangle(d4.drawing, 
    {  x: "100px", y: "150px", w: "150px", h: "100px", 
      strokewidth: "10px", strokecolor: "#000088" });  

</script>


<p>Polygons</p>

<div id="drawing5" 
  style="width:300px; height: 300px; border: 1px solid black; margin: 20px auto; padding: 0px; overflow: hidden;"></div>


<script type="text/javascript">
  
var d5 = new drawing(document.getElementById("drawing5"), { antialias: true, fillcolor: "#fff" });

var pg0 = d5.polygon(d5.drawing, 
    {  points: "50,50,200,50,250,100,250,150,50,150", 
      strokewidth: "14px", strokecolor: "#AA0000", fillcolor: "#330000" });  

var pg1 = d5.polygon(d5.drawing, 
    { points: "200,125,212.5,175,250,150,225,187.5,275,200,225," +
      "212.5,250,250,212.5,225,200,275,187.5,225,150,250,175,212.5," +
      "125,200,175,187.5,150,150,187.5,175", 
      strokewidth: "6px", strokecolor: "#000088" });  

</script>


</body>
</html>